<template>
  <div class="about">
    <p>分类页</p>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import type { Ref } from 'vue'
// 给ref 标注类型 

// 方式1(常用):  ts 会自动推导 year 的类型
// const year = ref(2023)
// year.value = '2018' // 赋值提示类型错误

// 方式2(不常用): 
// const year: Ref<string | number> = ref(2022);


// 方式3:(常用)
const year = ref<number | string>(2022);




// 给reactive标注类型
// 方式1(常用): ts 会自动推导 reactive中的参数的类型
// const userobj = reactive({ name: '周星驰', movie: '大话西游' });
// userobj.movie = 100  提示类型错误


// 方式2: 显示的标注类型
// interface userObjType {
//   name: string,
//   movie: string
// }
// const userObj: userObjType = reactive({ name: '星爷', movie: '功夫' })
// userObj.name = 100  // 提示类型错误




//  给计算属性标注类型
// 方式1: ts 会自动推导其类型
// const count = ref(100);
// const doubleCount = computed(() => count.value * 2)
// console.log('doubleCount', doubleCount.value);


// 方式2: 显式的标注类型

// const schoollist = ref<Array<{ id: number, schoolname: string }>>([])
interface schoolItem {
  id: number,
  schoolname: string
}
const schoollist = ref<Array<schoolItem>>([]);

const filterschoollist = computed<schoolItem[]>(() => schoollist.value.filter(item => item.schoolname.includes('北京')))

</script>

<style scoped></style>
